import { useEffect } from 'react';

import { Course as Component } from '@/pagesComponents/Course';
import { env } from '@/shared/constants';
import { deepLinks } from '@/shared/constants/urls';
import { CourseDto } from '@/shared/interfaces/generated';
import { getImageUrl } from '@/shared/lib/images';
import { generateMetaData } from '@/shared/lib/meta';
import { GetServerSideProps } from 'next';
import Head from 'next/head';

export default function Course({ id, data }: { id: string; data: CourseDto }) {
  const title = data?.product?.title;
  const description = data?.product?.description;
  const image = getImageUrl(data?.product?.image);
  const author = data?.product?.company?.title;
  const url = `${env.siteUrl}/course/${id}`;
  return (
    <>
      <Head>
        <meta content={`app-id=1624893065, app-argument=${deepLinks.course(id)}`} name="apple-itunes-app" />
        <meta content={author} property="article:author" />
        {generateMetaData({ title, description, image, url })}
      </Head>
      <Component />
    </>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const id = context.params?.id;
  const res = await fetch(`${env.apiUrl}/courses/${id}`);
  const data = await res.json();
  if (typeof id !== 'string' || data?.statusCode) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      id,
      data,
    },
  };
};
